<template>
  <div class="app-container towSearchHeader">
    <div class="customContainer">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-date-picker :editable="false" :clearable="false" v-model="pickerDate" value-format="yyyy.MM.dd" type="daterange" align="right" unlink-panels
            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" style="width:240px"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select class="w160" placeholder="选择品牌" v-model="formInline.brand" @change="brandChange">
            <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <el-select class="w160" filterable placeholder="选择门店" v-model="formInline.store_id">
            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select class="w160" placeholder="退款原因" v-model="formInline.reason">
            <el-option v-for="item in reason_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select class="w160" placeholder="支付类型" v-model="formInline.pay_way">
            <el-option v-for="item in pay_way" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input class="w160" v-model="formInline.yum_no" placeholder="请输入运管单号"></el-input>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
      </el-form>

      <!-- 列表 -->
      <el-table highlight-current-row :data="list" border size="small">
        <el-table-column align="center" label="申请时间" prop="timeline"></el-table-column>
        <el-table-column align="center" label="运管单号	" prop="order_id"></el-table-column>
        <el-table-column align="center" label="退款原因" prop="reason"></el-table-column>
        <el-table-column align="center" label="来源" prop="gift_type">
          <template slot-scope="scope">
            {{ scope.row.source==1?'支付宝':'微信'}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="退款金额(元)" prop="money"></el-table-column>
        <el-table-column align="center" label="订单截图" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.photo">
              <img :src="scope.row.photo" width="60" height="60" alt="">
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="联系电话">
          <template slot-scope="scope">
            {{scope.row.mobile?scope.row.mobile:'-'}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="退款说明">
          <template slot-scope="scope">
            {{scope.row.msg?scope.row.msg:'-'}}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bottom_box">
      <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="20"
        layout="prev, pager, next, jumper" :total="totalDataNumber">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getBrandList, getStoreList, getList, getPage } from '@/api/dashboard/refund_apply';
import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils';
export default {
  data() {
    return {
      is_buy: false,
      pay_way: [
        { id: 0, name: '全部' },
        { id: 1, name: '支付宝' },
        { id: 2, name: '微信' }
      ],
      reason_list: [
        { id: 0, name: '全部' },
        { id: '付款成功不能游玩', name: '付款成功不能游玩' },
        { id: '付款成功后少玩', name: '付款成功后少玩' }
      ],
      currentPage: 1,
      totalDataNumber: 0,
      brandList: [],
      storeList: [],
      formInline: {
        store_id: '',
        pay_way: '',
        start_time: '',
        end_time: '',
        yum_no: '',
        reason: ''
      },
      store_list: [],
      list: null,
      pickerOptions: pickerOptionsF(),
      pickerDate: pickerDateF()
    };
  },
  created() {
    this.getBrand();
  },
  methods: {
    getBrand() {
      getBrandList({ org: 1, category_id: 309 }).then(response => {
        this.brandList = response;
        this.formInline.brand = response[0].id;
        this.getStore();
      });
    },
    brandChange() {
      this.formInline.store_id = '';
      this.getStore();
    },
    getStore() {
      getStoreList({ brand: this.formInline.brand, category_id: 309 }).then(response => {
        this.storeList = response;
        let data = response.filter(res => res.id == this.$store.getters.optionId);
        if (data.length > 0) {
          this.formInline.store_id = data[0].id;
        }
        if (this.list == null) {
          this.searchClick();
        }
      });
    },
    searchClick() {
      optionMaxTime(this.pickerDate).then(() => {
        //最大可选择时间区间
        this.formInline.start_time = this.pickerDate ? this.pickerDate[0] : '';
        this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
        this.fetchData();
      });
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.currentPage = 1;
      getPage(this.formInline)
        .then(response => {
          this.totalDataNumber = response.page * 20;
          getList(this.formInline).then(response => {
            this.list = response;
            this.listLoading = false;
          });
        })
        .catch(res => {
          this.listLoading = false;
        });
    },
    // 分页
    handleCurrentChange(val) {
      this.listLoading = true;
      getList(this.formInline, val).then(response => {
        this.list = response;
        this.listLoading = false;
      });
    }
  }
};
</script>